<template>
    <div class="search">
        <h3>搜索{{ route.query.key }}相关内容如下</h3>
        <SongList :song-data="songdata"></SongList>
        <Pagination @page-change="getmore" :current-page="currentPage" :total="total" :page-size="pageSize">
        </Pagination>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { GetSearchInfo } from '@/api/api';
import { useRoute } from 'vue-router';
import SongList from "@/components/common/playlist/SongList.vue";
import Pagination from "@/components/common/Pagination.vue";
import type { SongsData } from "@/models/playlist.ts"
const route = useRoute();
const keywords = route.query.key as string
const songdata = ref<SongsData>()
const currentPage = ref(1)//当前页
const pageSize = ref(30)//每页的条数
const total = ref(0)
onMounted(() => {
    GetSearchDeatal(keywords,1,30,0)
});
//获取搜索结果
const GetSearchDeatal = async (keywords: string, type?: number, limit?: number, offset?: number) => {
    await GetSearchInfo(keywords, type, limit, offset).then(res => {
        total.value = res.data.result.songCount
        songdata.value = res.data.result.songs;
    })

}
//页码改变后的操作
const getmore = async (newPage: number) => {
    await GetSearchInfo(keywords,1, pageSize.value, (newPage - 1) * pageSize.value).then(res => {
        songdata.value = res.data.result.songs
        currentPage.value = newPage
    })
}

</script>
<style lang="scss" scoped>

</style>
